<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style></style>
  </head>
  <body>
    <div id="app">
      <div>
        <div @click="fn2">
          <!-- 修饰符 -->
          <!-- 事件修饰符 -->
          <!-- 鼠标事件修饰符 -->
          <!-- @click.prevent阻止默认行为 -->
          <!-- .stop 阻止冒泡 -->
          <!-- 键盘修饰符（按键修饰符） -->
          <!-- @keyup.enter 回车事件 -->
          <!-- v-model修饰符 -->
          <input type="text" v-model="name" @click.stop @keyup.enter="add" />
          <a href="http://ww.baidu.com" @click.prevent.stop="fn">添加</a>
        </div>
      </div>
      <ul>
        <li v-for="(item,index) in list" :key="item.id">
          <button @click="list.splice(index,1)">{{ item.name }}删除</button>
        </li>
      </ul>
    </div>

    <!-- 引入vue -->
    <script src="./vue.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: {
          name: "",
          list: [
            { id: 1, name: "张三" },
            { id: 2, name: "李四" },
            { id: 3, name: "王老虎" },
          ],
        },
        methods: {
          fn() {
            this.list.push({
              id: this.list.length + 1,
              name: this.name,
            });
            this.name = "";
          },
          fn2() {
            alert("冒泡了");
          },
          add() {
            this.list.push({
              id: Date.now(),
              name: this.name,
            });
            this.name = "";
          },
        },
      });
    </script>
  </body>
</html>
